<template>
  <!-- 新增顶部浅蓝色条框 -->
  <div class="top-banner">
    <div class="banner-content">
      <img src="/zw.png" alt="智文" class="banner-img" />
      <img src="/wf.png" alt="文风" class="banner-img" />
      <img src="/wp.png" alt="文评" class="banner-img" />
    </div>
  </div>


  <div class="container">

    <!-- 新增：对比图容器 -->
    <div class="comparison-container">
      <div class="comparison-item">
        <div class="comparison-image">
          <div class="comparison-tag">AIGC率太高？</div>
          <img src="/对比04.png" alt="AIGC降重前对比图" class="comparison-img">
          <div class="comparison-text">降重前：100%</div>
        </div>
      </div>
      <div class="comparison-item">
        <div class="comparison-image">
          <div class="comparison-tag">你也可以！</div>
          <img src="/对比03.jpg" alt="AIGC降重后对比图" class="comparison-img">
          <div class="comparison-text">降重后：16.8%</div>
        </div>
      </div>
      <!-- 新增的两个对比图框 -->
      <div class="comparison-item">
        <div class="comparison-image">
          <div class="comparison-tag">AIGC率太高？</div>
          <img src="/对比02.png" alt="AIGC降重前对比图" class="comparison-img">
          <div class="comparison-text">降重前：68.56%</div>
        </div>
      </div>
      <div class="comparison-item">
        <div class="comparison-image">
          <div class="comparison-tag">你也可以！</div>
          <img src="/对比01.jpg" alt="AIGC降重后对比图" class="comparison-img">
          <div class="comparison-text">降重后：5.89%</div>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 结果状态区域 -->
      <div class="result-status" v-if="buildStatus !== null || paymentSuccessButTaskNotStarted">
        <el-card shadow="hover" class="status-card">
          <div v-if="buildStatus === 2 || paymentSuccessButTaskNotStarted" class="status-processing">
            <el-icon class="status-icon spinning"><Loading /></el-icon>
            <span>内容生成中，预计10~30秒，请勿刷新或离开当前页面，请稍候...</span>
          </div>
          <div v-if="buildStatus === -5" class="status-error">
            <el-icon class="status-icon"><CloseBold /></el-icon>
            <span>内容生成失败：{{ errorMessage }}</span>
          </div>
          <div v-if="buildStatus === 1" class="status-success">
            <el-icon class="status-icon"><Check /></el-icon>
            <span>内容生成成功！</span>
            <el-button type="primary" @click="handleViewResult" class="view-result-btn">立即查看结果</el-button>
            <!-- 新增查看操作文档按钮 -->
            <el-button type="info" @click="handleViewInstruction" class="view-instruction-btn">点击查看操作说明</el-button>
          </div>
          <el-button v-if="buildStatus === 2 && taskId" type="info" @click="checkTaskStatus" :loading="isChecking" class="refresh-btn">
            {{ isChecking? '查询中...' : '刷新状态' }}
          </el-button>
        </el-card>
      </div>

<!--      &lt;!&ndash; 轮播图区域 &ndash;&gt;-->
<!--      <div class="carousel-container">-->
<!--        <el-carousel :interval="4000" height="300px" indicator-position="outside">-->
<!--          <el-carousel-item v-for="item in carouselImages" :key="item">-->
<!--            <img :src="item" alt="轮播图" class="carousel-image" />-->
<!--          </el-carousel-item>-->
<!--        </el-carousel>-->
<!--      </div>-->

      <!-- 上传区域 -->
      <el-upload
          class="upload-card"
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
          :show-file-list="false"
          drag
      >
        <div class="upload-area">
          <el-icon class="upload-icon"><UploadFilled /></el-icon>
          <div class="upload-text">
            <p class="title">点击或拖拽文件到此区域</p>
            <p class="tip">仅支持 DOCX 格式，字数不少于1000字</p>
          </div>
        </div>
      </el-upload>

      <!-- 参数选择区域 -->
      <div class="parameter-selection">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="场景">
              <el-select v-model="sceneId" placeholder="请选择场景" class="custom-select">
                <el-option label="学生版" value="1"></el-option>
                <el-option label="英文版" value="2"></el-option>
                <el-option label=" 编辑版" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="检测平台">
              <el-select v-model="platformId" placeholder="请选择检测平台" v-if="sceneId === '1'" :disabled="sceneId!== '1'" class="custom-select">
                <el-option label="知w" value="1"></el-option>
                <el-option label="维p" value="2"></el-option>
                <el-option label="万f" value="3"></el-option>
              </el-select>
              <el-select v-model="platformId" placeholder="请选择检测平台" v-else :disabled="true" class="custom-select">
                <el-option label="知w" value="1"></el-option>
                <el-option label="维p" value="2"></el-option>
                <el-option label="万f" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="语言">
              <el-select v-model="languageId" placeholder="请选择语言" class="custom-select">
                <el-option label="中文" value="1"></el-option>
                <el-option label="英文" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="sceneId === '3'" :gutter="20">
          <el-col :span="12">
            <el-form-item label="模式">
              <el-select v-model="mode" placeholder="请选择模式" class="custom-select">
                <el-option label="去痕强力版" value="1"></el-option>
                <el-option label="文风稳定版" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 文件预览 -->
      <div v-if="file" class="file-preview">
        <el-card shadow="hover" class="file-card">
          <div class="file-info">
            <el-icon class="file-icon" :color="fileIcon.color">
              <component :is="fileIcon.icon" />
            </el-icon>
            <div class="file-details">
              <h3>{{ fileName }}</h3>
              <p class="meta">{{ fileType.toUpperCase() }}文档 · {{ fileSize }}字</p>
            </div>
            <div class="file-actions">
              <el-button
                  type="danger"
                  circle
                  @click="handleRemoveFile"
                  class="remove-btn"
              >
                <el-icon><Close /></el-icon>
              </el-button>
            </div>
          </div>
        </el-card>
      </div>

      <div class="or-divider">
        <span class="divider-text">或</span>
      </div>

      <!-- 文本输入区域 -->
      <el-input
          v-model="inputText"
          type="textarea"
          :rows="8"
          placeholder="直接粘贴文本内容，不少于500字..."
          @input="calculatePrice"
          class="custom-textarea"
      />

      <!-- 操作区域 -->
      <div class="action-panel">
        <div class="price-details">
          <h4 class="price-title">费用明细</h4>
          <div class="price-item">
            <span>字数：</span>
            <span>{{ fileSize }}字</span>
          </div>
          <div class="price-item total">
            <span>总费用：</span>
            <span>¥ {{ totalPrice }}</span>
          </div>
        </div>

        <el-button
            type="success"
            :disabled="!canSubmit"
            @click="handleSubmit"
            size="large"
            class="submit-btn"
        >
          <el-icon class="mr-1"><MagicStick /></el-icon>
          立即智能降重
        </el-button>
      </div>
    </div>

    <!-- 系统介绍 -->
    <div class="system-info">
      <el-card shadow="hover" class="info-card">
        <div class="system-header">
          <div class="header-pill"><span>AIGC率90%一键直降20%以下！</span></div>
          <div class="card-header">
            <el-icon class="header-icon"><Monitor /></el-icon>
            <h3 class="info-title">沐影降AIGC系统</h3>
          </div>
          <p class="header-subtitle">支持各大权威平台检测</p>
        </div>

        <p class="info-description">
          <strong>先进的AI语义解析模型</strong>，精准识别文本逻辑与语义结构，
          针对重复表述提供<mark>毫秒级深度诊断</mark>，生成优化方案。
        </p>

        <p class="info-description">
          无论是严谨的<strong>学术论文</strong>，专业的<strong>商业文档</strong>，
          还是日常的<strong>创意写作</strong>，沐影降 AIGC 系统都能精准适配不同场景需求，以<mark>专业视角</mark>予文字更强表现力与可读性。
        </p>

        <div class="info-list-container">
          <div class="list-badge">核心特点</div>
          <ul class="info-list">
            <li><span class="highlight">仅支持DOCX格式</span></li>
            <li>智能分析<span class="highlight">字符数与费用</span></li>
            <li>快速生成<span class="highlight">优化后的文本</span></li>
            <li>基于<span class="highlight">人工智能技术</span></li>
            <li><span class="highlight">严格保护用户隐私</span></li>
          </ul>
        </div>

        <p style="margin-top: 20px; color: #72c6df; text-align: center; font-size: 14px; font-weight: 500;">若在使用过程中有任何疑问或建议，欢迎随时联系我们的专业客服团队！</p>
      </el-card>
    </div>
  </div>

  <!-- 注意事项 -->
  <div class="notice-section">
    <h3 class="noyice-title">注意事项</h3>
    <el-alert
        title="重要提示"
        type="warning"
        :closable="false"
        class="notice-alert"
    >
      <ul class="notice-list">
        <li><el-icon><Warning /></el-icon> 上传文档/文本粘贴：仅上传正文，删除内容中的封面、摘要、目录、参考文献、致谢、附录等非正文内容</li>
        <li><el-icon><Warning /></el-icon> 目前仅支持中文文本处理，暂不支持图片、表格、公式、代码等内容的降AIGC处理</li>
        <li><el-icon><Warning /></el-icon> 系统生成的内容仅用于参考，不作为毕业、发表等正式用途使用</li>
        <li><el-icon><Warning /></el-icon> 请确保上传的内容不包含任何敏感或隐私信息</li>
      </ul>
    </el-alert>
  </div>
</template>

<script>
import { UploadFilled, Close, MagicStick, Document, Loading, CloseBold, Check, Monitor } from '@element-plus/icons-vue'
import axios from 'axios'
import { usePaymentStore } from '../store/paymentStore';
import { useFileStore } from '../store/fileStore';
import mammoth from'mammoth';
import wordCount from 'word-count';

axios.defaults.baseURL = import.meta.env.VITE_GATEWAY_URL || 'http://localhost:8080';

export default {
  data() {
    const userId = sessionStorage.getItem('userId');
        // 从 sessionStorage 中取出邀请码
        const invitationCode = sessionStorage.getItem('invitationCode');
    return {
      inputText: '',
      charCount: 0,
      file: null,
      fileName: '',
      fileType: '',
      fileSize: 0,
      taskId: null,
      buildStatus: null,
      resultUrl: '',
      errorMessage: '',
      isChecking: false,
      taskStatus: null,
      userId: userId,
      sceneId: '1',
      mode: '',
      platformId: '1',
      languageId: '1',
      paymentSuccessButTaskNotStarted: false, // 新增：支付成功但任务未开始状态
      ossKey: null, // 新增：全局变量用于存储 ossKey
        // 使用取出的邀请码
        invitationCode: invitationCode, 

      carouselImages: [
        '/my01.png',
        '/my02.png',
        '/my03.png'
      ],
    }
  },
  computed: {
    totalPrice() {
      let ratePerWord;
      if (this.invitationCode === '108') {
        ratePerWord = 0.0048; // 每字 0.0048 元，即一千字 4.8 元
      } else {
        ratePerWord = 0.005; // 每字 0.005 元，即一千字五块
      }
      return (this.fileSize * ratePerWord).toFixed(2);
    },
    canSubmit() {
      return this.file || this.inputText.trim().length > 0;
    },
    fileIcon() {
      const icons = {
        doc: { icon: 'Document', color: '#2b5797' },
        docx: { icon: 'Document', color: '#2b5797' },
        txt: { icon: 'Document', color: '#666' }
      };
      return icons[this.fileType] || { icon: 'Document', color: '#999' };
    }
  },
  // 支付完成跳转回来后恢复数据
  created() {
    const { paymentSuccess } = this.$route.query;

    if (paymentSuccess) {
      const fileStore = useFileStore();
      if (fileStore.ossKey) {
        this.ossKey = fileStore.ossKey;
      }
      if (fileStore.fileName) {
        this.fileName = fileStore.fileName;
      }
      if (fileStore.fileSize) {
        this.fileSize = fileStore.fileSize;
      }
      if (fileStore.fileType) {
        this.fileType = fileStore.fileType;
      }

      this.inputText = sessionStorage.getItem('inputText') || '';

      // 显示处理中状态，但不立即开始轮询
      this.paymentSuccessButTaskNotStarted = true;
      this.buildStatus = 2;

      this.processAfterPayment();
    }
  },
  mounted() {
    const paymentStore = usePaymentStore();
    if (paymentStore.getPaymentStatus) {
      this.processAfterPayment();
    }
  },
  beforeDestroy() {
    // 组件销毁时清除定时任务
    if (this.checkPaymentInterval) {
      clearInterval(this.checkPaymentInterval);
    }
  },
  methods: {
    async beforeUpload(file) {
      const validTypes = ['docx'];
      const extension = file.name.split('.').pop().toLowerCase();
      const isLt15M = file.size / 1024 / 1024 < 15;

      if (!validTypes.includes(extension)) {
        this.$message.error('仅支持 DOCX 格式!');
        return false;
      }
      if (!isLt15M) {
        this.$message.error('文件大小不能超过15MB!');
        return false;
      }

      this.file = file;
      this.fileName = file.name;
      this.fileType = extension;

      const reader = new FileReader();
      reader.onload = async (e) => {
        const arrayBuffer = e.target.result;
        try {
          const result = await mammoth.extractRawText({ arrayBuffer });
          const text = result.value;

          // 优化的字数计算方法
          if (this.languageId === '1') { // 中文
            // 去除所有标点符号、空格和特殊字符
            const cleanText = text.replace(/[\s\p{P}""''（）【】《》…—·\r\n]/gu, '');
            this.fileSize = cleanText.length;
          } else if (this.languageId === '2') { // 英文
            // 使用自定义函数计算英文单词数
            this.fileSize = this.countEnglishWords(text);
          }

          console.log('原始文本长度:', text.length);
          console.log('清理后字数:', this.fileSize);
        } catch (error) {
          console.error('文本提取错误:', error);
          this.$message.error('文件解析失败');
        }
      };
      reader.readAsArrayBuffer(file);

      this.$message.success('文件上传成功！');
    },
    handleRemoveFile() {
      this.file = null;
      this.fileName = '';
      this.fileSize = 0;
      const fileStore = useFileStore();
      fileStore.clearOssKey();
    },
    calculatePrice() {
      this.charCount = this.inputText.replace(/\s/g, '').length;
      if (!this.file) {
        this.fileSize = this.charCount;
      }
    },

    //按下提交后的准备
    async handleSubmit() {
      try {
        if (!this.userId) {
          this.$message.warning('请先登录！');
          this.$router.push({name: 'login'});
          return;
        }
        if (this.charCount === 0 && this.file === null) {
          this.$message.warning('请输入文本内容！');
          return;
        }

        // 添加字数验证
        if (this.file && this.fileSize < 1000) {
          this.$message.error('文档内容不少于1000字，当前字数：' + this.fileSize);
          return;
        }

        if (!this.file && this.charCount < 500) {
          this.$message.error('文本内容不少于500字，当前字数：' + this.charCount);
          return;
        }

        const paymentStore = usePaymentStore();
        const outTradeNo = this.generateOrderNumber();
        paymentStore.setOutTradeNo(outTradeNo);

        sessionStorage.setItem('inputText', this.inputText);

        if (this.file) {
          // 在跳转支付页面前上传文件并获取 ossKey
          const uploadForm = new FormData();
          uploadForm.append('file', this.file);
          uploadForm.append('userId', String(this.userId));
          uploadForm.append('fileCategory', 'UPLOAD');
          console.log('[DEBUG] 上传文件:', this.file);
          for (let [key, value] of uploadForm.entries()) {
            console.log(`${key}:`, value);
          }

          const uploadRes = await axios.post('/file/upload', uploadForm, {});
          this.ossKey = uploadRes.data;
          const fileStore = useFileStore();
          // 设置文件信息
          fileStore.setFileInfo(this.ossKey, this.fileName, this.fileType, this.fileSize);
        } else {
          const fileStore = useFileStore();
          fileStore.clearFileInfo();
          this.ossKey = null;
        }


        // 获取用户角色
        const userRole = sessionStorage.getItem('role');

        // 根据用户角色设置金额
        const amount = userRole === 'ADMIN' ? 0.01 : this.totalPrice;

        // 跳转支付页面并传递金额
        this.$router.push({
          name: 'payment',
          query: {
            amount: amount,
            outTradeNo: outTradeNo
          }
        });

      } catch (error) {
        this.handleError(error);
      }
    },
    generateOrderNumber() {
      const userId = this.userId;
      const randomLetters = this.getRandomLetters(3);
      const timestamp = new Date().getTime();
      return `${userId}${randomLetters}${timestamp}`;
    },
    getRandomLetters(length) {
      let result = '';
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
      const charactersLength = characters.length;
      for (let i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
      }
      return result;
    },

    async processAfterPayment() {
      if (this.ossKey) {
        this.handleFileProcessing();
      } else if (this.inputText.trim()) {
        this.handleTextProcessing();
      } else {
        this.$message.warning('请上传文件或输入文本内容');
        return;
      }
      this.taskStatus = 'processing';
    },


    //异步降重整体流程
    async handleFileProcessing() {
      try {
        const getUrlRes = await axios.get(`/file/getUrl/${this.ossKey}`);

        if (getUrlRes.status === 200) {
          const fileURL = getUrlRes.data;
          console.log('获取到的文件 URL:', fileURL);

          const body = {
            name: this.fileName,
            size: this.fileSize,
            file_url: fileURL,
            scene_id: parseInt(this.sceneId), // 确保 scene_id 是整数
            mode: this.mode ? parseInt(this.mode) : null, // 确保 mode 是整数
            platform_id: this.platformId,
            language_id: this.languageId,
            version: 1 // 固定值 1
          };

          const asyncRes = await axios.post('/aigc/paper-pass-create', body);
          if (asyncRes.status === 200 && asyncRes.data.code === 1) {
            const taskId = asyncRes.data.data.id;
            this.taskId = taskId;

            // 清除支付成功但任务未开始的状态
            this.paymentSuccessButTaskNotStarted = false;

            this.buildStatus = 2;
            this.$message.success('任务创建成功，任务ID: ' + taskId);
            await this.saveFileInfoToDb(this.ossKey, this.taskId, this.fileName, this.fileType, this.fileSize, 'UPLOAD');
          } else {
            throw new Error(asyncRes.data.msg || '任务创建失败');
          }

          this.handleAsyncResponse(asyncRes.data);
        } else {
          throw new Error(getUrlRes.data.msg || '获取文件 URL 失败');
        }

      } catch (error) {
        this.handleError(error);
      }
    },

    //  处理文本输入
    async handleTextProcessing() {
      const syncRes = await axios.post('/aigc/paper-pass-build', {
        content: this.inputText, // 新增：传递文本框中的内容
        scene_id: parseInt(this.sceneId),
        mode: this.mode ? parseInt(this.mode) : null,
        platform_id: this.platformId,
        language_id: this.languageId,
        version: 1
      });

      if (syncRes.status === 200 && syncRes.data.code === 1) {
        const newContent = syncRes.data.data.new_content;
        const wordBlob = await this.downloadWord(newContent);
        const ossKey = await this.uploadToOss(wordBlob, `文字上传${this.userId}`);
        await this.saveFileInfoToDb(ossKey, syncRes.data.data.id, `文字上传${this.userId}`, this.fileType, this.fileSize, 'GENERATED');
        this.buildStatus = 1;
        this.$message.success('降重完成');
        // 降重完成后将支付状态设置为未支付
        const paymentStore = usePaymentStore();
        paymentStore.setPaymentSuccess(false);
        // 清除 fileStore 里的文件信息
        const fileStore = useFileStore();
        fileStore.clearFileInfo();
        this.ossKey = null;
        // 清除URL中的paymentSuccess参数，但不刷新页面
        const newUrl = this.$router.resolve({
          path: this.$route.path,
          query: { ...this.$route.query, paymentSuccess: undefined }
        }).href;

        window.history.replaceState({}, '', newUrl);
      } else {
        this.handleError(syncRes.data);
      }
    },
    // 下载word
    async downloadWord(text) {
      try {
        const response = await axios.post('/document/generateWord', text, {
          responseType: 'blob',
          headers: {
            'Content-Type': 'text/plain'
          }
        });
        const blob = new Blob([response.data]);
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', `文字上传${this.userId}.docx`);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
        return blob;
      } catch (error) {
        this.handleError(error);
      }
    },
    async uploadToOss(blob, fileName) {
      try {
        const uploadForm = new FormData();
        uploadForm.append('file', blob, fileName);
        uploadForm.append('userId', String(this.userId));

        const uploadRes = await axios.post('/file/upload', uploadForm, {});
        return uploadRes.data;
      } catch (error) {
        this.handleError(error);
      }
    },
    async saveFileInfoToDb(ossKey, taskId, fileName, fileType, fileSize, fileCategory) {
      try {
        const params = {
          userId: this.userId,
          fileCategory: fileCategory,
          ossKey: ossKey,
          fileName: fileName,
          fileType: fileType,
          fileSize: fileSize,
          taskId: taskId
        };

        const saveFileInfoRes = await axios.post('/file/saveFileInfo', params, {
          headers: {
            'Content-Type': 'application/json'
          }
        });

        if (saveFileInfoRes.status === 200) {
          console.log('文件信息保存到数据库成功');
        } else {
          throw new Error(saveFileInfoRes.data.msg || '文件信息保存到数据库失败');
        }
      } catch (error) {
        this.handleError(error);
      }
    },
    handleAsyncResponse(response) {
      if (response.code === 1) {
        this.buildStatus = 2;
        this.taskId = response.data.id;
        this.startPolling();
      }
    },
    // 定时查询任务状态
    startPolling() {
      // 清除可能存在的旧定时器
      if (this.pollingTimer) clearInterval(this.pollingTimer);

      // 只有在有 taskId 的情况下才开始轮询
      if (this.taskId) {
        this.pollingTimer = setInterval(() => {
          this.checkTaskStatus();
        }, 5000);
      }
    },
    beforeUnmount() {
      clearInterval(this.pollingTimer);
    },
    async checkTaskStatus() {
      try {
        this.isChecking = true;
        const res = await axios.get('/aigc/paper-pass-status', {
          params: {id: this.taskId}
        });

        if (res.data.code === 1) {
          this.buildStatus = res.data.data.build_status;
          if (this.buildStatus === 1) {
            this.resultUrl = res.data.data.content_url;
            // 降重完成后将支付状态设置为未支付
            const paymentStore = usePaymentStore();
            paymentStore.setPaymentSuccess(false);
            // 清除 fileStore 里的文件信息
            const fileStore = useFileStore();
            fileStore.clearFileInfo();
            this.ossKey = null;
            // 清除URL中的paymentSuccess参数，但不刷新页面
            const newUrl = this.$router.resolve({
              path: this.$route.path,
              query: { ...this.$route.query, paymentSuccess: undefined }
            }).href;
            window.history.replaceState({}, '', newUrl);
          } else if (this.buildStatus === -5) {
            this.errorMessage = res.data.msg;
            // 清除 fileStore 里的文件信息
            const fileStore = useFileStore();
            fileStore.clearFileInfo();
            this.ossKey = null;
          }

          if ([1, -5].includes(this.buildStatus)) {
            clearInterval(this.pollingTimer);
          }
        }
      } catch (error) {
        this.handleError(error);
      } finally {
        this.isChecking = false;
      }
    },
    async handleViewResult() {
      if (this.taskId) {
        try {
          const res = await axios.get('/aigc/paper-pass-info', {
            params: {id: this.taskId}
          });

          if (res.data.code === 1) {
            const contentUrl = res.data.data.content_url;
          const explainRes = await axios.get(`/file/getUrl/${encodeURIComponent('网站用户操作说明书.docx')}`);
            const explainURL = explainRes.data;
            if (contentUrl) {
              window.open(contentUrl, '_blank');
              console.log('获取到操作文件URL:', explainURL);
              window.open(explainURL, '_blank');
            } else {
              this.$message.warning('结果 URL 为空');
            }
          } else {
            this.$message.error(res.data.msg || '获取结果详情失败');
          }
        } catch (error) {
          this.handleError(error);
        }
      } else {
        this.$message.warning('任务 ID 为空，无法获取结果');
      }
    },
    // 新增查看操作文档的方法
    async handleViewInstruction() {
      try {
        const explainRes = await axios.get(`/file/getUrl/${encodeURIComponent('网站用户操作说明书.docx')}`);
        const explainURL = explainRes.data;
        console.log('获取到操作文件URL:', explainURL);
        window.open(explainURL, '_blank');
      } catch (error) {
        this.handleError(error);
      }
    },
    handleError(error) {
      console.error(error);
      this.buildStatus = -5;
      this.errorMessage = error.response?.data?.msg || error.message || '请求失败';
      this.$message.error(this.errorMessage);
    }
  },
  components: {
    UploadFilled,
    Close,
    MagicStick,
    Document,
    Loading,
    CloseBold,
    Check,
    Monitor
  }
}
</script>

<style scoped>


/* 顶部浅蓝色条框样式 */
.top-banner {
  background-color: rgba(230, 247, 255, 0.7); /* 半透明的浅蓝色 */
  padding: 15px 0;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  backdrop-filter: blur(5px);
}

.banner-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 200px; /* 将间距从40px增加到100px */
}

.banner-img {
  height: 40px;
  object-fit: contain;
  transition: transform 0.3s ease;
  /* 确保图片保持透明 */
  mix-blend-mode: multiply;
}

.banner-img:hover {
  transform: scale(1.05);
}

/* 整体容器美化 */
.container {
  border-radius: 8px;         /* 圆角边框 */
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  gap: 30px;
}

/* 创建"你也可以！"标签的样式 */
.comparison-tag {
  position: absolute;
  top: -10px;
  right: -10px;
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transform: rotate(10deg);
  z-index: 10;
  animation: pulse 2s infinite;
}

/* 第一个和第三个标签 - 黄红渐变（AIGC率太高） */
.comparison-container .comparison-item:nth-child(1) .comparison-tag,
.comparison-container .comparison-item:nth-child(3) .comparison-tag {
  background: linear-gradient(135deg, #FFC107, #FF5722); /* 黄红渐变背景 */
}

/* 第二个和第四个标签 - 蓝绿渐变（你也可以！） */
.comparison-container .comparison-item:nth-child(2) .comparison-tag,
.comparison-container .comparison-item:nth-child(4) .comparison-tag {
  background: linear-gradient(135deg, #53cfbc, #47a1c8); /* 蓝绿渐变背景 */
}

/* 为标签添加脉冲动画效果 */
@keyframes pulse {
  0% { transform: rotate(10deg) scale(1); }
  50% { transform: rotate(10deg) scale(1.1); }
  100% { transform: rotate(10deg) scale(1); }
}

/* 对比图容器样式 - 整体容器 */
.comparison-container {
  margin-left: -80px; /* 可根据实际需求调整左边距 */
  width: 250px;                /* 设置容器宽度为200px */
  display: flex;               /* 使用弹性布局 */
  flex-direction: column;      /* 子元素垂直排列 */
  gap: 20px;                   /* 子元素之间间距为30px */
  position: sticky;            /* 使容器具有粘性定位 */
  top: 20px;                   /* 粘性定位时，距顶部20px */
  align-self: flex-start;      /* 在父容器中靠上对齐 */
}

/* 单个对比项样式 - 包含图片和文字 */
.comparison-item {
  border-radius: 8px;         /* 圆角边框 */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); /* 阴影效果 */
  display: flex;               /* 使用弹性布局 */
  flex-direction: column;      /* 子元素垂直排列 */
  align-items: center;         /* 子元素水平居中 */
}

/* 图片容器样式 - 方形边框容器 */
.comparison-image {
  width: 100%;               /* 宽度占满父容器 */
  height: auto;              /* 高度自适应 */
  aspect-ratio: 1/1;         /* 保持1:1的宽高比 */
  position: relative;        /* 相对定位，用于文字定位 */
  display: flex;             /* 弹性布局 */
  align-items: center;       /* 垂直居中 */
  justify-content: center;   /* 水平居中 */
  border-radius: 8px;        /* 确保图片容器也有圆角 */
}

/* 对比图文字说明 - 放在图片内部底部 */
.comparison-text {
  position: absolute;         /* 绝对定位 */
  bottom: 0;                  /* 定位到底部 */
  left: 0;                    /* 左侧对齐 */
  right: 0;                   /* 右侧对齐，确保宽度占满 */
  padding: 10px;              /* 内边距 */
  text-align: center;         /* 文字居中 */
  font-weight: 600;           /* 字体加粗 */
  color: white !important;    /* 强制使用白色文字 */
  background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
  margin-top: 0;              /* 移除顶部外边距 */
  border-top: none;           /* 移除顶部边框 */
  border-radius: 0 0 5px 5px; /* 底部圆角 */
}

/* 第一个图片边框样式 - 添加红色边框 */
.comparison-container .comparison-item:first-child .comparison-image {
  border: 5px solid rgba(220, 53, 69, 0.3);   /* 3px宽的淡红色边框 */
}

/* 第二个图片边框样式 - 添加蓝色边框 */
.comparison-container .comparison-item:nth-child(2) .comparison-image {
  border: 5px solid rgba(46, 188, 178, 0.68);  /* 3px宽的淡蓝色边框 */
}

/* 第三个图片边框样式 - 添加红色边框 */
.comparison-container .comparison-item:nth-child(3) .comparison-image {
  border: 5px solid rgba(220, 53, 69, 0.3);   /* 5px宽的淡红色边框 */
}

/* 第四个图片边框样式 - 添加绿色边框 */
.comparison-container .comparison-item:nth-child(4) .comparison-image {
  border: 5px solid rgba(46, 188, 178, 0.68);  /* 5px宽的淡绿色边框 */
}

/* 第一个图片文字样式 - 红色背景 */
.comparison-container .comparison-item:nth-child(1)  .comparison-text {
  background-color: rgb(220, 63, 49); /* 半透明红色背景 */
}


/* 第二个图片文字样式 - 蓝色背景 */
.comparison-container .comparison-item:nth-child(2) .comparison-text {
  background-color: rgb(49, 195, 191); /* 半透明蓝色背景 */
}

/* 第三个图片文字样式 - 红色背景 */
.comparison-container .comparison-item:nth-child(3)  .comparison-text {
  background-color: rgb(220, 63, 49); /* 半透明红色背景 */
}


/* 第四个图片文字样式 - 蓝色背景 */
.comparison-container .comparison-item:nth-child(4) .comparison-text {
  background-color: rgb(49, 195, 191); /* 半透明蓝色背景 */
}



/* 图片容器悬停效果 */
.comparison-image:hover {
  transform: translateY(-5px);  /* 悬停时向上移动5px */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);  /* 悬停时加深阴影 */
}

/* 图片本身样式 */
.comparison-img {
  max-width: 100%;             /* 最大宽度为容器的100% */
  max-height: 100%;            /* 最大高度为容器的100% */
  object-fit: contain;         /* 保持图片原始宽高比，完整显示图片 */
}

/* 图片下方文字样式 */
.comparison-text {
  margin-top: 12px;            /* 距离上方图片12px */
  font-size: 16px;             /* 字体大小16px */
  font-weight: 600;            /* 字体粗细为600(半粗体) */
  color: #30a1af;              /* 文字颜色为蓝绿色 */
}

/* 修改响应式布局 */
@media (max-width: 1024px) {
  .comparison-container {
    width: 220px;
  }

  .comparison-image {
    width: 200px;
    height: 200px;
  }
}

@media (max-width: 768px) {
  .container {
    flex-wrap: wrap;
  }

  .comparison-container {
    display: none; /* 在移动端隐藏对比图 */
  }
}



/* 轮播图样式 */
.carousel-container {
  margin-bottom: 25px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 增加轮播图容器高度 */
:deep(.el-carousel__container) {
  height: 380px !important; /* 增加高度从300px到380px */
}

/* 图片填充样式优化 */
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 改为contain确保整个图片能显示 */
  background-color: #f8f8f8; /* 添加背景色 */
  transition: transform 0.5s ease;
}

/* 轮播指示器样式 */
:deep(.el-carousel__indicators) {
  bottom: 20px;
}

:deep(.el-carousel__indicator) {
  margin: 0 6px;
}

:deep(.el-carousel__button) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

:deep(.el-carousel__indicator.is-active .el-carousel__button) {
  background-color: #fff;
  transform: scale(1.2);
}

/* 轮播箭头样式 */
:deep(.el-carousel__arrow) {
  background-color: rgba(31, 45, 61, 0.4);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  transition: all 0.3s ease;
}

:deep(.el-carousel__arrow:hover) {
  background-color: rgba(31, 45, 61, 0.7);
  transform: scale(1.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
  :deep(.el-carousel__container) {
    height: 300px !important;
  }

  :deep(.el-carousel__arrow) {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  :deep(.el-carousel__container) {
    height: 220px !important;
  }

  :deep(.el-carousel__arrow) {
    width: 32px;
    height: 32px;
  }
}
/* 主内容区域样式 - 页面的主要内容区块 */
.main-content {
  width: 100%; /* 可根据实际需求调整宽度，这里设置为 80% */
  max-width: 100%; /* 确保内容不会溢出父容器 */
  flex: 1;                               /* 弹性布局中占据剩余空间 */
  background-color: #ffffff;             /* 白色背景 */
  border-radius: 12px;                   /* 圆角边框 */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); /* 阴影效果 */
  padding: 25px;                         /* 内边距 */
  transition: all 0.3s ease;             /* 平滑过渡效果 */
}

/* 结果状态区域样式 - 显示处理状态的区域 */
.result-status {
  margin-bottom: 30px;                   /* 下方外边距 */
}

/* 状态卡片样式 - 包裹状态信息的卡片 */
.status-card {
  border-radius: 10px;                   /* 圆角边框 */
  overflow: hidden;                      /* 溢出内容隐藏 */
  transition: all 0.3s ease;             /* 平滑过渡效果 */
  border: none;                          /* 无边框 */
}

/* 状态卡片悬停效果 */
.status-card:hover {
  transform: translateY(-3px);           /* 上移效果 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* 悬停时增强阴影 */
}

/* 处理中状态样式 - 黄色系 */
.status-processing {
  display: flex;                         /* 弹性布局 */
  align-items: center;                   /* 垂直居中对齐 */
  color: #e6a23c;                        /* 黄色文字 */
  padding: 15px;                         /* 内边距 */
  background-color: #fdf6ec;             /* 淡黄色背景 */
  border-radius: 8px;                    /* 圆角边框 */
}

/* 错误状态样式 - 红色系 */
.status-error {
  display: flex;                         /* 弹性布局 */
  align-items: center;                   /* 垂直居中对齐 */
  color: #f56c6c;                        /* 红色文字 */
  padding: 15px;                         /* 内边距 */
  background-color: #fef0f0;             /* 淡红色背景 */
  border-radius: 8px;                    /* 圆角边框 */
}

/* 成功状态样式 - 绿色系 */
.status-success {
  display: flex;                         /* 弹性布局 */
  align-items: center;                   /* 垂直居中对齐 */
  color: #3cb3b3;                        /* 青绿色文字 */
  padding: 15px;                         /* 内边距 */
  background-color: #f0f9eb;             /* 淡绿色背景 */
  border-radius: 8px;                    /* 圆角边框 */
  gap: 15px;                             /* 元素间距 */
}

/* 状态图标样式 */
.status-icon {
  font-size: 28px;                       /* 图标大小 */
  margin-right: 12px;                    /* 右侧外边距 */
}

/* 旋转动画效果 - 用于加载中状态 */
.spinning {
  animation: spin 2s linear infinite;    /* 应用旋转动画 */
}

/* 定义旋转动画 */
@keyframes spin {
  0% {
    transform: rotate(0deg);             /* 起始角度 */
  }
  100% {
    transform: rotate(360deg);           /* 结束角度 */
  }
}

/* 查看结果按钮样式 */
.view-result-btn {
  margin-left: auto;                     /* 自动左侧外边距使按钮靠右 */
  background: linear-gradient(135deg, #41acba, #3abfba); /* 渐变背景 */
  border: none;                          /* 无边框 */
  padding: 8px 20px;                     /* 内边距 */
  border-radius: 20px;                   /* 圆角边框 */
  transition: all 0.3s ease;             /* 过渡效果 */
}

/* 查看结果按钮悬停效果 */
.view-result-btn:hover {
  transform: translateY(-2px);           /* 上移效果 */
  box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3); /* 阴影效果 */
}

/* 查看结果按钮样式 */
.view-instruction-btn {
  margin-left: auto;                     /* 自动左侧外边距使按钮靠右 */
  background: linear-gradient(135deg, #ddc780, #cd871d); /* 渐变背景 */
  border: none;                          /* 无边框 */
  padding: 8px 20px;                     /* 内边距 */
  border-radius: 20px;                   /* 圆角边框 */
  transition: all 0.3s ease;             /* 过渡效果 */
}

/* 刷新按钮样式 */
.refresh-btn {
  margin-top: 12px;                      /* 上方外边距 */
  border-radius: 20px;                   /* 圆角边框 */
}

/* 上传区域卡片样式 */
.upload-card {
  margin-bottom: 28px;                   /* 下方外边距 */
}

/* 上传区域样式 */
.upload-area {
  padding: 40px 0;                       /* 上下内边距 */
  text-align: center;                    /* 文字居中 */
  background: linear-gradient(135deg, #e6f7ff 0%, #d0e8ff 100%); /* 渐变背景 */
  border-radius: 12px;                   /* 圆角边框 */
  transition: all 0.3s ease;             /* 过渡效果 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 阴影效果 */
}

/* 上传区域悬停效果 */
.upload-area:hover {
  background: linear-gradient(135deg, #d0e8ff 0%, #bae0ff 100%); /* 悬停时变化背景渐变 */
  transform: translateY(-3px);           /* 上移效果 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* 增强阴影 */
}

/* 上传图标样式 */
.upload-icon {
  font-size: 54px;                       /* 图标大小 */
  color: #73c5e1;                        /* 图标颜色 */
  margin-bottom: 16px;                   /* 下方外边距 */
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); /* 图标阴影 */
}

/* 上传区域标题样式 */
.upload-text .title {
  font-size: 18px;                       /* 字体大小 */
  font-weight: 600;                      /* 字体粗细 */
  color: #333;                           /* 字体颜色 */
  margin-bottom: 10px;                   /* 下方外边距 */
}

/* 上传区域提示文字样式 */
.upload-text .tip {
  font-size: 14px;                       /* 字体大小 */
  color: #606266;                        /* 字体颜色 */
}

/* 参数选择区域样式 */
.parameter-selection {
  background-color: #f8f9fa;             /* 背景颜色 */
  border-radius: 10px;                   /* 圆角边框 */
  padding: 20px;                         /* 内边距 */
  margin-bottom: 25px;                   /* 下方外边距 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 阴影效果 */
}

/* 自定义选择框样式 */
.custom-select {
  width: 100%;                           /* 宽度占满容器 */
}

/* Element UI 输入框样式覆盖 */
.custom-select :deep(.el-input__wrapper) {
  border-radius: 8px;                    /* 圆角边框 */
  box-shadow: 0 0 0 1px #dcdfe6 inset;   /* 内阴影作为边框 */
  transition: all 0.3s ease;             /* 过渡效果 */
}

/* Element UI 输入框悬停样式 */
.custom-select :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #c0c4cc inset;   /* 悬停时边框颜色变化 */
}

/* Element UI 输入框聚焦样式 */
.custom-select :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409EFF inset;   /* 聚焦时边框颜色变化 */
}

/* 文件预览区域样式 */
.file-preview {
  margin: 20px 0;                        /* 上下外边距 */
}

/* 文件卡片样式 */
.file-card {
  border-radius: 10px;                   /* 圆角边框 */
  overflow: hidden;                      /* 溢出内容隐藏 */
  transition: all 0.3s ease;             /* 过渡效果 */
}

/* 文件卡片悬停效果 */
.file-card:hover {
  transform: translateX(5px);            /* 右移效果 */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 文件信息区样式 */
.file-info {
  display: flex;                         /* 弹性布局 */
  align-items: center;                   /* 垂直居中对齐 */
  padding: 16px;                         /* 内边距 */
}

/* 文件图标样式 */
.file-icon {
  font-size: 40px;                       /* 图标大小 */
  margin-right: 20px;                    /* 右侧外边距 */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); /* 图标阴影 */
}

/* 文件详情样式 */
.file-details {
  flex: 1;                               /* 占据剩余空间 */
}

/* 文件名样式 */
.file-details h3 {
  margin: 0;                             /* 外边距清零 */
  font-size: 16px;                       /* 字体大小 */
  color: #303133;                        /* 字体颜色 */
  font-weight: 600;                      /* 字体粗细 */
}

/* 文件元信息样式 */
.file-details .meta {
  margin: 6px 0 0;                       /* 上方外边距 */
  color: #909399;                        /* 浅灰色文字 */
  font-size: 13px;                       /* 字体大小 */
}

/* 文件操作区样式 */
.file-actions {
  margin-left: 15px;                     /* 左侧外边距 */
}

/* 移除按钮样式 */
.remove-btn {
  background: rgba(245, 108, 108, 0.1);  /* 半透明红色背景 */
  border: none;                          /* 无边框 */
  color: #f56c6c;                        /* 红色文字 */
  transition: all 0.3s ease;             /* 过渡效果 */
}

/* 移除按钮悬停效果 */
.remove-btn:hover {
  background: rgba(245, 108, 108, 0.2);  /* 加深背景色 */
  transform: rotate(90deg);              /* 旋转效果 */
}

/* 分割线样式 */
.or-divider {
  position: relative;                    /* 相对定位 */
  height: 1px;                           /* 高度1像素 */
  background: linear-gradient(90deg, transparent, rgba(64, 158, 255, 0.5), transparent); /* 渐变背景 */
  margin: 35px 0;                        /* 上下外边距 */
}

/* 分割线中间文字样式 */
.divider-text {
  position: absolute;                    /* 绝对定位 */
  left: 50%;                             /* 水平居中 */
  top: 50%;                              /* 垂直居中 */
  transform: translate(-50%, -50%);      /* 精确居中 */
  background: white;                     /* 白色背景 */
  padding: 0 20px;                       /* 左右内边距 */
  color: #409EFF;                        /* 文字颜色 */
  font-weight: 500;                      /* 字体粗细 */
  font-size: 15px;                       /* 字体大小 */
}

/* 文本输入区域样式 */
.custom-textarea {
  margin: 20px 0;                        /* 上下外边距 */
}

/* Element UI 文本框样式覆盖 */
.custom-textarea :deep(.el-textarea__inner) {
  border-radius: 10px;                   /* 圆角边框 */
  padding: 16px;                         /* 内边距 */
  font-size: 14px;                       /* 字体大小 */
  line-height: 1.6;                      /* 行高 */
  border: 2px solid #e1effe;             /* 边框样式 */
  transition: all 0.3s ease;             /* 过渡效果 */
}

/* Element UI 文本框聚焦样式 */
.custom-textarea :deep(.el-textarea__inner:focus) {
  border-color: #409EFF;                 /* 聚焦时边框颜色 */
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.2); /* 聚焦时阴影 */
}

/* 操作面板样式 */
.action-panel {
  margin-top: 35px;                      /* 上方外边距 */
}

/* 费用明细样式 */
.price-details {
  background: #f9fafc;                   /* 背景颜色 */
  border: 1px solid #ebeef5;             /* 边框样式 */
  border-radius: 10px;                   /* 圆角边框 */
  padding: 20px;                         /* 内边距 */
  margin-bottom: 25px;                   /* 下方外边距 */
  transition: all 0.3s ease;             /* 过渡效果 */
}

/* 费用明细悬停效果 */
.price-details:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 悬停时阴影效果 */
}

/* 费用标题样式 */
.price-title {
  font-size: 18px;                       /* 字体大小 */
  font-weight: 600;                      /* 字体粗细 */
  color: #303133;                        /* 字体颜色 */
  margin-bottom: 15px;                   /* 下方外边距 */
  text-align: center;                    /* 文字居中 */
  position: relative;                    /* 相对定位 */
  padding-bottom: 10px;                  /* 底部内边距 */
}

/* 费用标题装饰线 */
.price-title:after {
  content: "";                           /* 插入内容 */
  position: absolute;                    /* 绝对定位 */
  bottom: 0;                             /* 底部对齐 */
  left: 40%;                             /* 左边距 */
  right: 40%;                            /* 右边距 */
  height: 3px;                           /* 高度 */
  background: linear-gradient(90deg, transparent, #409EFF, transparent); /* 渐变背景 */
  border-radius: 3px;                    /* 圆角 */
}

/* 价格项样式 */
.price-item {
  display: flex;                         /* 弹性布局 */
  justify-content: space-between;        /* 两端对齐 */
  font-size: 14px;                       /* 字体大小 */
  color: #606266;                        /* 字体颜色 */
  margin: 10px 0;                        /* 上下外边距 */
  padding: 5px 0;                        /* 上下内边距 */
}

/* 总价项样式 */
.price-item.total {
  font-weight: 600;                      /* 字体加粗 */
  color: #409EFF;                        /* 蓝色文字 */
  border-top: 1px dashed #d0e2ff;        /* 顶部虚线边框 */
  padding-top: 12px;                     /* 顶部内边距 */
  margin-top: 12px;                      /* 顶部外边距 */
  font-size: 16px;                       /* 字体增大 */
}

/* 提交按钮样式 */
.submit-btn {
  width: 100%;                           /* 宽度占满 */
  height: 50px;                          /* 高度 */
  font-size: 16px;                       /* 字体大小 */
  font-weight: 600;                      /* 字体加粗 */
  letter-spacing: 2px;                   /* 字间距 */
  background: linear-gradient(135deg, #b62424, #d63939); /* 红色渐变背景 */
  border: none;                          /* 无边框 */
  border-radius: 25px;                   /* 圆角边框 */
  transition: all 0.3s ease;             /* 过渡效果 */
  box-shadow: 0 4px 12px rgba(182, 36, 36, 0.3); /* 阴影效果 */
}

/* 提交按钮悬停效果 */
.submit-btn:hover:not(:disabled) {
  transform: translateY(-3px);           /* 上移效果 */
  box-shadow: 0 8px 20px rgba(182, 36, 36, 0.4); /* 增强阴影 */
}

/* 提交按钮禁用状态 */
.submit-btn:disabled {
  background: #f0f0f0;                   /* 灰色背景 */
  color: #c0c4cc;                        /* 灰色文字 */
  box-shadow: none;                      /* 移除阴影 */
}

/* 系统标题区域样式 */
.system-header {
  text-align: center;                    /* 文字居中 */
  margin-bottom: 20px;                   /* 下方外边距 */
  position: relative;                    /* 相对定位 */
}

/* 标题药丸样式 */
.header-pill {
  display: inline-block;                 /* 行内块元素 */
  background: linear-gradient(120deg, #ffffff, #fbfbfb); /* 渐变背景 */
  color: #d50000;                        /* 红色文字 */
  padding: 4px 12px;                     /* 内边距 */
  border-radius: 20px;                   /* 圆角边框 */
  font-size: 12px;                       /* 字体大小 */
  font-weight: 500;                      /* 字体粗细 */
  margin-bottom: 10px;                   /* 下方外边距 */
  box-shadow: 0 3px 6px rgba(60, 179, 179, 0.3); /* 阴影效果 */
}

/* 卡片标题区样式 */
.card-header {
  display: flex;                         /* 弹性布局 */
  align-items: center;                   /* 垂直居中 */
  justify-content: center;               /* 水平居中 */
  margin-bottom: 8px;                    /* 下方外边距 */
}

/* 标题图标样式 */
.header-icon {
  font-size: 24px;                       /* 图标大小 */
  background: linear-gradient(120deg, #41acba, #4571b3); /* 渐变背景 */
  color: white;                          /* 白色文字 */
  padding: 10px;                         /* 内边距 */
  border-radius: 12px;                   /* 圆角边框 */
  margin-right: 12px;                    /* 右侧外边距 */
  box-shadow: 0 4px 8px rgba(59, 172, 182, 0.2); /* 阴影效果 */
}

/* 信息标题样式 */
.info-title {
  font-size: 22px;                       /* 字体大小 */
  font-weight: 600;                      /* 字体粗细 */
  background: linear-gradient(120deg, #438391, #2f97d8); /* 渐变背景 */
  -webkit-background-clip: text;         /* 背景剪裁为文字 */
  -webkit-text-fill-color: transparent;  /* 文字透明显示背景 */
  margin: 0;                             /* 外边距清零 */
}

/* 标题副标题样式 */
.header-subtitle {
  font-size: 14px;                       /* 字体大小 */
  color: #3f93b3;                        /* 文字颜色 */
  margin: 5px 0 0;                       /* 上方外边距 */
  font-weight: 500;                      /* 字体粗细 */
}

/* 信息描述样式 */
.info-description {
  font-size: 14px;                       /* 字体大小 */
  line-height: 1.7;                      /* 行高 */
  margin-bottom: 18px;                   /* 下方外边距 */
  padding: 15px;                         /* 内边距 */
  background: #f5fbfb;                   /* 背景颜色 */
  border-radius: 8px;                    /* 圆角边框 */
  border-left: 3px solid #3c93b3;        /* 左侧边框 */
}

/* 描述中的加粗文字样式 */
.info-description strong {
  color: #3b859c;                        /* 文字颜色 */
  font-weight: 600;                      /* 字体粗细 */
}

/* 描述中的标记文本样式 */
.info-description mark {
  background-color: rgba(64, 158, 255, 0.15); /* 背景颜色 */
  color: #114b83;                        /* 文字颜色 */
  padding: 2px 5px;                      /* 内边距 */
  border-radius: 3px;                    /* 圆角边框 */
  font-weight: 500;                      /* 字体粗细 */
}

/* 信息列表容器样式 */
.info-list-container {
  background: #f5fbfb;                   /* 背景颜色 */
  border-radius: 10px;                   /* 圆角边框 */
  padding: 20px 15px;                    /* 内边距 */
  margin: 25px 0;                        /* 上下外边距 */
  box-shadow: inset 0 0 8px rgba(59, 172, 182, 0.1); /* 内阴影效果 */
  position: relative;                    /* 相对定位 */
}

/* 列表徽章样式 */
.list-badge {
  position: absolute;                    /* 绝对定位 */
  top: -10px;                            /* 顶部位置 */
  right: 20px;                           /* 右侧位置 */
  background: linear-gradient(120deg, #41acba, #3a74bf); /* 渐变背景 */
  color: white;                          /* 白色文字 */
  font-size: 11px;                       /* 字体大小 */
  font-weight: 600;                      /* 字体粗细 */
  padding: 3px 8px;                      /* 内边距 */
  border-radius: 6px;                    /* 圆角边框 */
  box-shadow: 0 2px 4px rgb(48, 175, 175); /* 阴影效果 */
}

/* 高亮文本样式 */
.highlight {
  color: #30a1af;                        /* 文字颜色 */
  font-weight: 600;                      /* 字体粗细 */
  background: rgba(60, 179, 179, 0.08);  /* 背景颜色 */
  padding: 1px 4px;                      /* 内边距 */
  border-radius: 3px;                    /* 圆角边框 */
}

/* 系统介绍样式 */
.system-info {
  width: 300px;
  position: sticky;
  top: 20px;
  align-self: flex-start;
  margin-right: -100px; /* 向右移动50px */
}

.info-card {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: none;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.system-info :deep(.el-card__body) {
  padding: 25px;
  position: relative;
}

.system-info :deep(.el-card__body):before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #439191, #2fd8d8);
}

/* 注意事项区域美化 - 修改为全横屏 */
.notice-section {
  width: 100%;
  margin: 0 auto 40px;
  padding: 20px 0;
  background-color: #fff9ed;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.05);
}

.noyice-title {
  font-size: 20px;
  font-weight: 600;
  color: #e6a23c;
  margin-bottom: 15px;
  text-align: center;
}

.notice-alert {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 10px;
}

.notice-list {
  padding-left: 0;
  list-style: none;
  max-width: 1200px;
  margin: 0 auto;
}

.notice-list li {
  margin-bottom: 10px;
  padding-left: 25px;
  position: relative;
  line-height: 1.7;
  font-size: 14px;
}

.notice-list li .el-icon {
  position: absolute;
  left: 0;
  top: 3px;
  color: #e6a23c;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .notice-alert,
  .notice-list {
    padding: 0 20px;
  }
}

/* 响应式布局调整 */
@media (max-width: 768px) {
  .top-banner {
    display: none; /* 在移动端完全隐藏顶部条框 */
  }

  .container {
    padding: 0 15px;
    margin: 20px auto;
    flex-direction: column; /* 改为纵向排列 */
  }

  .main-content {
    margin-right: 0;
    padding: 15px;
    margin-bottom: 20px;
  }

  .system-info {
    width: 100%;
    position: static;
    order: -1; /* 将系统介绍放在上传区域之前 */
    margin-bottom: 20px;
  }

  .info-card {
    border-radius: 10px;
  }

  .system-info :deep(.el-card__body) {
    padding: 15px;
  }

  .upload-area {
    padding: 20px 0;
  }

  .upload-icon {
    font-size: 40px;
    margin-bottom: 10px;
  }

  .upload-text .title {
    font-size: 16px;
  }

  .upload-text .tip {
    font-size: 12px;
  }

  .file-info {
    flex-wrap: wrap;
  }

  .file-details {
    flex: 1;
    min-width: 60%;
  }

  .parameter-selection {
    padding: 15px;
  }

  .banner-content {
    gap: 60px;
  }

  .banner-img {
    height: 30px;
  }

  /* 注意事项区域的移动端样式 */
  .notice-section {
    padding: 15px 0;
  }

  .noyice-title {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .notice-list li {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 8px;
  }

  .notice-alert,
  .notice-list {
    padding: 0 15px;
  }

  /* 调整操作区域 */
  .action-panel {
    margin-top: 20px;
  }

  .price-details {
    padding: 15px;
  }

  .price-title {
    font-size: 16px;
  }

  .submit-btn {
    height: 45px;
  }

  /* 调整分隔线 */
  .or-divider {
    margin: 25px 0;
  }

  /* 针对系统介绍和上传区域的专门优化 */
  .info-description {
    font-size: 13px;
    padding: 10px;
    margin-bottom: 12px;
  }

  .info-list-container {
    padding: 15px 10px;
    margin: 20px 0;
  }

  .list-badge {
    font-size: 10px;
    right: 10px;
  }

  .notice-list li .el-icon {
    top: 2px;
  }

  /* 更紧凑的布局 */
  .el-form-item {
    margin-bottom: 15px;
  }
}

/* 超小屏幕专用样式 */
@media (max-width: 480px) {
  .parameter-selection .el-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .parameter-selection .el-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 10px;
  }

  .info-title {
    font-size: 18px;
  }

  .header-subtitle {
    font-size: 12px;
  }

  .header-icon {
    font-size: 18px;
    padding: 8px;
  }

}
</style>